<!--
 * @Description: 自定义表单数据展示
 * @Author: Li Yujie
 * @Date: 2021/05/15
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/05/15
-->
<template>
    <section class="wrapper">
        <div
            v-for="(row,index) in data"
            :key="index"
            class="__items"
        >
            <!-- 单行文本 -->
            <template v-if="row.type === 1">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>
                <p class="__content">
                    {{ row.default.value }}
                </p>
            </template>

            <!-- 多行文本 -->
            <template v-if="row.type === 6">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>
                <p class="__content">
                    {{ row.default.value }}
                </p>
            </template>

            <!-- 单选题 -->
            <template v-if="row.type === 2">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>
                <!-- 单选题渲染 -->
                <template v-if="row.options.length">
                    <div class="__radio">
                        <el-radio
                            v-for="(el,key) in row.options"
                            :key="key"
                            v-model="el.default_selected"
                            :disabled="!el.default_selected"
                            :label="true"
                            :style="{
                                marginTop: '17px',
                                pointerEvents: 'none',
                                marginRight: '42px'
                            }"
                        >
                            <span :style="{color: el.default_selected ? '' : '#666' }">{{ el.title }}</span>
                            <el-input
                                v-if="el.option_type === 2"
                                :value="el.default_edit_content ? el.default_edit_content : ''"
                                :disabled="!el.default_selected"
                                size="medium"
                                :style="{
                                    flex: 1,
                                    backgroundColor: 'rgba(247, 247, 247, 1)',
                                    color: 'rgba(102, 102, 102, 1)',
                                    marginLeft: '12px'
                                }"
                            />
                        </el-radio>
                    </div>
                </template>
            </template>

            <!-- 多选题 -->
            <template v-if="row.type === 3">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>
                <!-- 多选题渲染 -->
                <template v-if="row.options.length">
                    <div
                        class="__radio"
                        style="align-items: flex-start"
                    >
                        <el-checkbox
                            v-for="(el,key) in row.options"
                            :key="key"
                            v-model="el.default_selected"
                            :disabled="!el.default_selected"
                            :label="true"
                            :style="{
                                marginTop: '17px',
                                pointerEvents: 'none',
                                width: el.option_type === 2 ? '' : '',
                            }"
                            :class="el.option_type === 2 ? 'width100' : ''"
                        >
                            <div
                                class="__textarea"
                                :style="{width: el.option_type === 2 ? '100%' : ''}"
                            >
                                <p class="__textarea_title">
                                    {{ el.title }}
                                </p>
                                <el-input
                                    v-if="el.option_type === 2"
                                    :value="el.default_edit_content ? el.default_edit_content : ''"
                                    :disabled="!el.default_selected"
                                    size="medium"
                                    :autosize="{ minRows: 3, maxRows: 4}"
                                    type="textarea"
                                    :style="{
                                        flex: 1,
                                        backgroundColor: 'rgba(247, 247, 247, 1)',
                                        color: 'rgba(102, 102, 102, 1)',
                                        marginLeft: '4px'
                                    }"
                                />
                            </div>
                        </el-checkbox>
                    </div>
                </template>
            </template>

            <!-- 单图片 -->
            <template v-if="row.type === 8">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>

                <!-- 渲染图片 -->
                <template v-if="row.default.value">
                    <img
                        :src="row.default.value"
                        :style="{
                            width: '100px',
                            height: '100px',
                            borderRadius: '2px',
                            marginTop: '16px',
                            cursor: 'pointer'
                        }"
                        @click="fnShowPreview([row.default.value], 0)"
                    >
                </template>
            </template>

            <!-- 多图片 -->
            <template v-if="row.type === 5">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>

                <!-- 渲染图片 -->
                <template v-if="row.default.value.length">
                    <div class="__imageList">
                        <img
                            v-for="(el,i) in row.default.value"
                            :key="i"
                            :src="el.value"
                            :style="{
                                width: '100px',
                                height: '100px',
                                borderRadius: '2px',
                                marginTop: '16px',
                                cursor: 'pointer',
                                marginRight: '12px',
                            }"
                            @click="handlePreviewImg(row.default.value, i)"
                        >
                    </div>
                </template>
            </template>

            <!-- 视频 -->
            <template v-if="row.type === 9">
                <span
                    class="__items_title"
                    :class="row.required ? 'is_required' : ''"
                >
                    {{ index + 1 }}. {{ row.title }}
                </span>

                <!-- 渲染视频 -->
                <template v-if="row.default.value.length">
                    <div class="__imageList">
                        <div
                            class="video-wrapper"
                            v-for="(el,i) in row.default.value"
                            :key="i"
                            :id="'playVideo' + i"
                            @click="playVideo(el ,i)"
                        >
                            <img
                                class="video-icon"
                                src="@/assets/image/play.png"
                            >
                            <el-image
                                :src="el.video_cover_url"
                                class="cover"
                            >
                                <div
                                    slot="error"
                                    class="image-slot"
                                >
                                    <i class="el-icon-picture-outline"/>
                                </div>
                            </el-image>
                        </div>
                    <!--<video
                            v-for="(el,i) in row.default.value"
                            :key="i"
                            :id="'playVideo' + i"
                            :style="{
                                width: '100px',
                                height: '100px',
                                borderRadius: '2px',
                                marginTop: '16px',
                                cursor: 'pointer',
                                marginRight: '12px',
                                objectFit: 'fill',
                            }"
                            @click="playVideo(el ,i)"
                        >
                            <source
                                :src="el.video_url"
                                type="video/mp4"
                            >
                        </video>-->
                    </div>
                </template>
            </template>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview"/>
        <!-- 视频预览 -->
        <video-simple
            ref="videoSimple"
            :url="video_url"
            :top="54"
            :left="left"
        />
    </section>
</template>

<script>
import ImgPreview from "./img-preview";
import VideoSimple from "../dorm/video-simple";

export default {
    name: "CustomFormData",
    components: {VideoSimple, ImgPreview},
    props: {
        data: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            video_url: '',
            left: 0
        };
    },
    methods: {
        /*
        * @description 多图预览
        */
        handlePreviewImg(row, index) {
            let images = row.reduce((cur, next) => {
                cur.push(next.value);
                return cur;
            }, []);

            this.$refs.preview.show(images, index);
        },


        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * @description 播放视频
         */
        playVideo (row, index) {
            this.left = document.querySelector('#playVideo' + index).getClientRects()[0].x - 278 - 40;
            this.video_url = row.video_url;
            this.$refs.videoSimple.showVideo();
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .__items {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 24px;

        .__items_title {
            color: rgba(51, 51, 51, 1);
            font-weight: 500;
            position: relative;
            width: max-content;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #333333;
        }

        .__imageList {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .__radio {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .__textarea {
                display: flex;
                width: 100%;
                flex: 1;

                &_title {
                    color: rgba(102, 102, 102, 1);
                    font-size: 14px;
                    padding-top: 4px;
                    margin-right: 12px;
                }
            }
        }

        .is_required {
            &::after {
                content: '*';
                position: absolute;
                color: rgba(255, 48, 48, 1);
                font-size: 14px;
                right: -6px;
                top: 0px;
            }
        }

        .__content {
            width: 100%;
            background: rgba(242, 242, 242, 1);
            border-radius: 4px;
            box-sizing: border-box;
            padding: 11px 12px;
            margin-top: 16px;
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            line-height: 22px;
        }

        .video-wrapper {
            margin-top: 16px;
            width: 102px;
            height: 102px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 12px;
            margin-bottom: 4px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            .video-icon {
                position: absolute;
                width: 32px;
                z-index: 1;
            }
        }
    }

}
</style>
